<div class="content-section introduction">
    <div class="feature-intro">
        <h1>Grid System</h1>
        <p>Grid is a lightweight flex based responsive layout utility optimized for mobile phones, tablets and desktops.</p>
    </div>
</div>

<div class="content-section documentation">
    <h5>Basic</h5>
    <div class="p-grid">
        <div class="p-col">
            <div class="box">1</div>
        </div>
        <div class="p-col">
            <div class="box">2</div>
        </div>
        <div class="p-col">
            <div class="box">3</div>
        </div>
    </div>

    <h5>Dynamic</h5>
    <button pButton pRipple type="button" icon="pi pi-plus" title="Add Column" (click)="addColumn()" [disabled]="columns.length === 20" class="p-mr-2"></button>
    <button pButton pRipple type="button" icon="pi pi-minus" title="Remove Column" (click)="removeColumn()"[disabled]="columns.length === 1"></button>

    <div class="p-grid p-mt-2">
        <div class="p-col" *ngFor="let col of columns; let i=index" [@animation]="'visible'">
            <div class="box">{{i + 1}}</div>
        </div>
    </div>

    <h5>Reverse Direction</h5>
    <div class="p-grid p-flex-row-reverse">
        <div class="p-col">
            <div class="box">1</div>
        </div>
        <div class="p-col">
            <div class="box">2</div>
        </div>
        <div class="p-col">
            <div class="box">3</div>
        </div>
    </div>

    <h5>Column Direction</h5>
    <div class="p-grid p-flex-column">
        <div class="p-col">
            <div class="box">1</div>
        </div>
        <div class="p-col">
            <div class="box">2</div>
        </div>
        <div class="p-col">
            <div class="box">3</div>
        </div>
    </div>

    <h5>Reverse Column Direction</h5>
    <div class="p-grid p-flex-column-reverse">
        <div class="p-col">
            <div class="box">1</div>
        </div>
        <div class="p-col">
            <div class="box">2</div>
        </div>
        <div class="p-col">
            <div class="box">3</div>
        </div>
    </div>

    <h5>12 Column Grid</h5>
    <div class="p-grid">
        <div class="p-col-4">
            <div class="box">4</div>
        </div>
        <div class="p-col">
            <div class="box">1</div>
        </div>
        <div class="p-col">
            <div class="box">1</div>
        </div>
        <div class="p-col">
            <div class="box">1</div>
        </div>
        <div class="p-col">
            <div class="box">1</div>
        </div>
        <div class="p-col">
            <div class="box">1</div>
        </div>
        <div class="p-col">
            <div class="box">1</div>
        </div>
        <div class="p-col">
            <div class="box">1</div>
        </div>
        <div class="p-col">
            <div class="box">1</div>
        </div>
    </div>

    <div class="p-grid">
        <div class="p-col-2">
            <div class="box">2</div>
        </div>
        <div class="p-col-6">
            <div class="box">6</div>
        </div>
        <div class="p-col-4">
            <div class="box">4</div>
        </div>
    </div>

    <div class="p-grid">
        <div class="p-col-8">
            <div class="box">8</div>
        </div>
        <div class="p-col-2">
            <div class="box">2</div>
        </div>
        <div class="p-col-2">
            <div class="box">2</div>
        </div>
    </div>

    <h5>MultiLine</h5>
    <div class="p-grid">
        <div class="p-col-6">
            <div class="box">6</div>
        </div>
        <div class="p-col-6">
            <div class="box">6</div>
        </div>
        <div class="p-col-6">
            <div class="box">6</div>
        </div>
        <div class="p-col-6">
            <div class="box">6</div>
        </div>
    </div>

    <h5>Fixed Width Column</h5>
    <div class="p-grid">
        <div class="p-col-fixed" style="width:100px">
            <div class="box">100px</div>
        </div>
        <div class="p-col">
            <div class="box">auto</div>
        </div>
    </div>

    <h5>Responsive</h5>
    <div class="p-grid">
        <div class="p-col-12 p-md-6 p-lg-3">
            <div class="box">p-col-12 p-md-6 p-lg-3</div>
        </div>
        <div class="p-col-12 p-md-6 p-lg-3">
            <div class="box">p-col-12 p-md-6 p-lg-3</div>
        </div>
        <div class="p-col-12 p-md-6 p-lg-3">
            <div class="box">p-col-12 p-md-6 p-lg-3</div>
        </div>
        <div class="p-col-12 p-md-6 p-lg-3">
            <div class="box">p-col-12 p-md-6 p-lg-3</div>
        </div>
    </div>

    <h5>Horizontal Alignment - Start</h5>
    <div class="p-grid p-jc-start">
        <div class="p-col-2">
            <div class="box">2</div>
        </div>
        <div class="p-col-1">
            <div class="box">1</div>
        </div>
        <div class="p-col-4">
            <div class="box">4</div>
        </div>
    </div>

    <h5>Horizontal Alignment - End</h5>
    <div class="p-grid p-jc-end">
        <div class="p-col-2">
            <div class="box">2</div>
        </div>
        <div class="p-col-1">
            <div class="box">1</div>
        </div>
        <div class="p-col-4">
            <div class="box">4</div>
        </div>
    </div>

    <h5>Horizontal Alignment - Center</h5>
    <div class="p-grid p-jc-center">
        <div class="p-col-2">
            <div class="box">2</div>
        </div>
        <div class="p-col-1">
            <div class="box">1</div>
        </div>
        <div class="p-col-4">
            <div class="box">4</div>
        </div>
    </div>

    <h5>Horizontal Alignment - Between</h5>
    <div class="p-grid p-jc-between">
        <div class="p-col-2">
            <div class="box">2</div>
        </div>
        <div class="p-col-1">
            <div class="box">1</div>
        </div>
        <div class="p-col-4">
            <div class="box">4</div>
        </div>
    </div>

    <h5>Horizontal Alignment - Around</h5>
    <div class="p-grid p-jc-around">
        <div class="p-col-2">
            <div class="box">2</div>
        </div>
        <div class="p-col-1">
            <div class="box">1</div>
        </div>
        <div class="p-col-4">
            <div class="box">4</div>
        </div>
    </div>

    <h5>Horizontal Alignment - Even</h5>
    <div class="p-grid p-jc-evenly">
        <div class="p-col-2">
            <div class="box">2</div>
        </div>
        <div class="p-col-1">
            <div class="box">1</div>
        </div>
        <div class="p-col-4">
            <div class="box">4</div>
        </div>
    </div>

    <h5>Vertical Alignment - Start</h5>
    <div class="p-grid p-ai-start vertical-container">
        <div class="p-col">
            <div class="box">4</div>
        </div>
        <div class="p-col">
            <div class="box">4</div>
        </div>
        <div class="p-col">
            <div class="box">4</div>
        </div>
    </div>

    <h5>Vertical Alignment - End</h5>
    <div class="p-grid p-ai-end vertical-container">
        <div class="p-col">
            <div class="box">4</div>
        </div>
        <div class="p-col">
            <div class="box">4</div>
        </div>
        <div class="p-col">
            <div class="box">4</div>
        </div>
    </div>

    <h5>Vertical Alignment - Center</h5>
    <div class="p-grid p-ai-center vertical-container">
        <div class="p-col">
            <div class="box">4</div>
        </div>
        <div class="p-col">
            <div class="box">4</div>
        </div>
        <div class="p-col">
            <div class="box">4</div>
        </div>
    </div>

    <h5>Vertical Alignment - Stretch</h5>
    <div class="p-grid p-ai-stretch vertical-container">
        <div class="p-col">
            <div class="box box-stretched">4</div>
        </div>
        <div class="p-col">
            <div class="box box-stretched">4</div>
        </div>
        <div class="p-col">
            <div class="box box-stretched">4</div>
        </div>
    </div>

    <h5>Vertical Alignment - Per Column</h5>
    <div class="p-grid vertical-container">
        <div class="p-col p-as-start">
            <div class="box">4</div>
        </div>
        <div class="p-col p-as-center">
            <div class="box">4</div>
        </div>
        <div class="p-col p-as-end">
            <div class="box">4</div>
        </div>
    </div>

    <h5>Offset</h5>
    <div class="p-grid">
        <div class="p-col-6 p-offset-3">
            <div class="box">6</div>
        </div>
    </div>

    <div class="p-grid">
        <div class="p-col-4">
            <div class="box">4</div>
        </div>
        <div class="p-col-4 p-offset-4">
            <div class="box">4</div>
        </div>
    </div>

    <h5>Nested</h5>
    <div class="p-grid nested-grid">
        <div class="p-col-8">
            <div class="p-grid">
                <div class="p-col-6">
                    <div class="box">6</div>
                </div>
                <div class="p-col-6">
                    <div class="box">6</div>
                </div>
                <div class="p-col-12">
                    <div class="box">12</div>
                </div>
            </div>
        </div>
        <div class="p-col-4">
            <div class="box box-stretched">4</div>
        </div>
    </div>

    <h5>Panels</h5>
    <div class="p-grid">
        <div class="p-col">
            <p-panel header="Header">
                <p class="p-m-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
                    Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
                    Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
                    cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
            </p-panel>
        </div>
        <div class="p-col">
            <p-panel header="Header">
                <p class="p-m-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
                    Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
                    Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
                    cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
            </p-panel>
        </div>
        <div class="p-col">
            <p-panel header="Header">
                <p class="p-m-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
                    Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
                    Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
                    cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
            </p-panel>
        </div>
    </div>
</div>

<div class="content-section documentation">
    <p-tabView>
        <p-tabPanel header="Documentation">
            <h5>Getting Started</h5>
            <p>FlexGrid is a CSS utility based on flexbox. For more information about Flex, visit <a href="https://css-tricks.com/snippets/css/a-guide-to-flexbox/">A Complete Guide to Flexbox</a>. A basic grid is defined by giving
            a container <i>p-grid</i> class and children the <i>p-col</i> class. Children of the grid will have the same width and scale according to the width of the parent.</p>

<app-code lang="markup" ngNonBindable ngPreserveWhitespaces>
&lt;div class="p-grid"&gt;
    &lt;div class="p-col"&gt;1&lt;/div&gt;
    &lt;div class="p-col"&gt;2&lt;/div&gt;
    &lt;div class="p-col"&gt;3&lt;/div&gt;
&lt;/div&gt;
</app-code>

<div class="p-grid">
    <div class="p-col">
        <div class="box">1</div>
    </div>
    <div class="p-col">
        <div class="box">2</div>
    </div>
    <div class="p-col">
        <div class="box">3</div>
    </div>
</div>

            <h5>12 Column Grid</h5>
            <p>FlexGrid includes a 12 column based layout utility where width of a column is defined with the <i>p-col-&#123;number&#125;</i> style class. Columns with 
                prefined widths can be used with columns with auto width (p-col) as well.
            </p>

            <p>In the first example below, first column covers the 4 units out of 12 and the rest of the columns share the remaining space whereas
                in the second example, all three columns have explicit units.
            </p>

<app-code lang="markup" ngNonBindable ngPreserveWhitespaces>
&lt;div class="p-grid"&gt;
    &lt;div class="p-col-4"&gt;4&lt;/div&gt;
    &lt;div class="p-col"&gt;1 &lt;/div&gt;
    &lt;div class="p-col"&gt;1 &lt;/div&gt;
    &lt;div class="p-col"&gt;1 &lt;/div&gt;
    &lt;div class="p-col"&gt;1 &lt;/div&gt;
    &lt;div class="p-col"&gt;1 &lt;/div&gt;
    &lt;div class="p-col"&gt;1 &lt;/div&gt;
    &lt;div class="p-col"&gt;1 &lt;/div&gt;
    &lt;div class="p-col"&gt;1 &lt;/div&gt;
&lt;/div&gt;

&lt;div class="p-grid"&gt;
    &lt;div class="p-col-2"&gt;2&lt;/div&gt;
    &lt;div class="p-col-6"&gt;6&lt;/div&gt;
    &lt;div class="p-col-4"&gt;4&lt;/div&gt;
&lt;/div&gt;
</app-code>

<div class="p-grid">
    <div class="p-col-4">
        <div class="box">4</div>
    </div>
    <div class="p-col">
        <div class="box">1</div>
    </div>
    <div class="p-col">
        <div class="box">1</div>
    </div>
    <div class="p-col">
        <div class="box">1</div>
    </div>
    <div class="p-col">
        <div class="box">1</div>
    </div>
    <div class="p-col">
        <div class="box">1</div>
    </div>
    <div class="p-col">
        <div class="box">1</div>
    </div>
    <div class="p-col">
        <div class="box">1</div>
    </div>
    <div class="p-col">
        <div class="box">1</div>
    </div>
</div>

<div class="p-grid">
    <div class="p-col-2">
        <div class="box">2</div>
    </div>
    <div class="p-col-6">
        <div class="box">6</div>
    </div>
    <div class="p-col-4">
        <div class="box">4</div>
    </div>
</div>

            <h5>MultiLine</h5>
            <p>When the number of columns exceed 12, columns wrap to a new line.</p>

<app-code lang="markup" ngNonBindable ngPreserveWhitespaces>
&lt;div class="p-grid"&gt;
    &lt;div class="p-col-6"&gt;6&lt;/div&gt;
    &lt;div class="p-col-6"&gt;6&lt;/div&gt;
    &lt;div class="p-col-6"&gt;6&lt;/div&gt;
    &lt;div class="p-col-6"&gt;6&lt;/div&gt;
&lt;/div&gt;
</app-code>

<div class="p-grid">
    <div class="p-col-6">
        <div class="box">6</div>
    </div>
    <div class="p-col-6">
        <div class="box">6</div>
    </div>
    <div class="p-col-6">
        <div class="box">6</div>
    </div>
    <div class="p-col-6">
        <div class="box">6</div>
    </div>
</div>

            <h5>Fixed Width Column</h5>
            <p>A column can have a fixed width while siblings having auto width. Apply <i>p-col-fixed</i> class to fix a column width.</p>

<app-code lang="markup" ngNonBindable ngPreserveWhitespaces>
&lt;div class="p-grid"&gt;
    &lt;div class="p-col-fixed" style="width:100px"&gt;Fixed&lt;/div&gt;
    &lt;div class="p-col"&gt;Auto&lt;/div&gt;
&lt;/div&gt;
</app-code>

<div class="p-grid">
    <div class="p-col-fixed" style="width:100px">
        <div class="box">100px</div>
    </div>
    <div class="p-col">
        <div class="box">auto</div>
    </div>
</div>


        <h5>Responsive</h5>
        <p>Responsive layout is achieved by applying breakpoint specific classes to the columns whereas <i>p-col-*</i> define the default behavior for mobile devices with small screens. 
            Four screen sizes are supported with different breakpoints.</p>
        
        <div class="doc-tablewrapper">
            <table class="doc-table">
                <thead>
                    <tr>
                        <th>Prefix</th>
                        <th>Devices</th>
                        <th>Media Query</th>
                        <th>Example</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>p-sm-*</td>
                        <td>Small devices</td>
                        <td>min-width: 576px</td>
                        <td>p-sm-6, p-sm-4</td>
                    </tr>
                    <tr>
                        <td>p-md-*</td>
                        <td>Medium sized devices such as tablets</td>
                        <td>min-width: 768px</td>
                        <td>p-md-2, p-md-8</td>
                    </tr>
                    <tr>
                        <td>p-lg-*</td>
                        <td>Devices with large screen like desktops</td>
                        <td>min-width: 992px</td>
                        <td>p-lg-6, p-lg-12</td>
                    </tr>
                    <tr>
                        <td>p-xl-*</td>
                        <td>Big screen monitors</td>
                        <td>min-width: 1200px</td>
                        <td>p-xl-2, p-xl-10</td>
                    </tr>
                </tbody>
            </table>
        </div>

        <p>In example below, large screens display 4 columns, medium screens display 2 columns in 2 rows and finally on small devices, columns are stacked.</p>
        
<app-code lang="markup" ngNonBindable ngPreserveWhitespaces>
&lt;div class="p-grid"&gt;
    &lt;div class="p-col-12 p-md-6 p-lg-3"&gt;A&lt;/div&gt;
    &lt;div class="p-col-12 p-md-6 p-lg-3"&gt;B&lt;/div&gt;
    &lt;div class="p-col-12 p-md-6 p-lg-3"&gt;C&lt;/div&gt;
    &lt;div class="p-col-12 p-md-6 p-lg-3"&gt;D&lt;/div&gt;
&lt;/div&gt;
</app-code>

<div class="p-grid">
    <div class="p-col-12 p-md-6 p-lg-3">
        <div class="box">p-col-12 p-md-6 p-lg-3</div>
    </div>
    <div class="p-col-12 p-md-6 p-lg-3">
        <div class="box">p-col-12 p-md-6 p-lg-3</div>
    </div>
    <div class="p-col-12 p-md-6 p-lg-3">
        <div class="box">p-col-12 p-md-6 p-lg-3</div>
    </div>
    <div class="p-col-12 p-md-6 p-lg-3">
        <div class="box">p-col-12 p-md-6 p-lg-3</div>
    </div>
</div>

            <h5>Offset</h5>
            <p>Offset classes allow defining a left margin on a column to avoid adding empty columns for spacing.</p>

<app-code lang="markup" ngNonBindable ngPreserveWhitespaces>
&lt;div class="p-grid"&gt;
    &lt;div class="p-col-6 p-offset-3"&gt;6&lt;/div&gt;
&lt;/div&gt;

&lt;div class="p-grid"&gt;
    &lt;div class="p-col-4"&gt;4 &lt;/div&gt;
    &lt;div class="p-col-4 p-offset-4"&gt;4&lt;/div&gt;
&lt;/div&gt;
</app-code>

<div class="p-grid">
    <div class="p-col-6 p-offset-3">
        <div class="box">6</div>
    </div>
</div>

<div class="p-grid">
    <div class="p-col-4">
        <div class="box">4</div>
    </div>
    <div class="p-col-4 p-offset-4">
        <div class="box">4</div>
    </div>
</div>

            <p>The list of offset classes varying within a range of 1 to 12.</p>
            <div class="doc-tablewrapper">
                <table class="doc-table">
                    <thead>
                        <tr>
                            <th>Prefix</th>
                            <th>Devices</th>
                            <th>Media Query</th>
                            <th>Example</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>p-col-offset-*</td>
                            <td>All devices</td>
                            <td>All screens</td>
                            <td>p-col-offset-6, p-col-offset-4</td>
                        </tr>
                        <tr>
                            <td>p-sm-offset-*</td>
                            <td>Small devices</td>
                            <td>min-width: 576px</td>
                            <td>p-sm-offset-6, p-sm-offset-4</td>
                        </tr>
                        <tr>
                            <td>p-md-offset-*</td>
                            <td>Medium sized devices such as tablets</td>
                            <td>min-width: 768px</td>
                            <td>p-md-offset-6, p-md-offset-4</td>
                        </tr>
                        <tr>
                            <td>p-lg-offset-*</td>
                            <td>Devices with large screen like desktops</td>
                            <td>min-width: 992px</td>
                            <td>p-lg-offset-6, p-lg-offset-4</td>
                        </tr>
                        <tr>
                            <td>p-xl-offset-*</td>
                            <td>Big screen monitors</td>
                            <td>min-width: 1200px</td>
                            <td>p-xl-offset-6, p-xl-offset-4</td>
                        </tr>
                    </tbody>
                </table>
            </div>

            <h5>Nested</h5>
            <p>Columns can be nested to create more complex layouts.</p>

<app-code lang="markup" ngNonBindable ngPreserveWhitespaces>
&lt;div class="p-grid"&gt;
    &lt;div class="p-col-8"&gt;
        &lt;div class="p-grid"&gt;
            &lt;div class="p-col-6"&gt;
                6
            &lt;/div&gt;
            &lt;div class="p-col-6"&gt;
                6
            &lt;/div&gt;
            &lt;div class="p-col-12"&gt;
                12
            &lt;/div&gt;
        &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="p-col-4"&gt;
        4
    &lt;/div&gt;
&lt;/div&gt;
</app-code>

<div class="p-grid nested-grid">
    <div class="p-col-8">
        <div class="p-grid">
            <div class="p-col-6">
                <div class="box">6</div>
            </div>
            <div class="p-col-6">
                <div class="box">6</div>
            </div>
            <div class="p-col-12">
                <div class="box">12</div>
            </div>
        </div>
    </div>
    <div class="p-col-4">
        <div class="box box-stretched">4</div>
    </div>
</div>

        <h5>Gutter</h5>
        <p>A .5rem padding is applied to each column along with negative margins on the container element, in case you'd like to remove these gutters, apply
            <i>.p-nogutter</i> class to the container. Gutters can also be removed on an ndividual columns with the same class name.
        </p>

<app-code lang="markup" ngNonBindable ngPreserveWhitespaces>
&lt;div class="p-grid p-nogutter"&gt;
    &lt;div class="p-col"&gt;1&lt;/div&gt;
    &lt;div class="p-col p-nogutter"&gt;2&lt;/div&gt;
    &lt;div class="p-col"&gt;3&lt;/div&gt;
&lt;/div&gt;
</app-code>
</p-tabPanel>

        <p-tabPanel header="Source">
            <a href="https://github.com/primefaces/primeng/tree/master/src/app/showcase/components/primeflex/" class="btn-viewsource" target="_blank">
                <span>View on GitHub</span>
            </a>

<app-code lang="markup" ngNonBindable ngPreserveWhitespaces>
&lt;h5&gt;Basic&lt;/h5&gt;
&lt;div class="p-grid"&gt;
    &lt;div class="p-col"&gt;
        &lt;div class="box"&gt;1&lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="p-col"&gt;
        &lt;div class="box"&gt;2&lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="p-col"&gt;
        &lt;div class="box"&gt;3&lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;

&lt;h5&gt;Dynamic&lt;/h5&gt;
&lt;button pButton pRipple type="button" icon="pi pi-plus" title="Add Column" (click)="addColumn()" [disabled]="columns.length === 20" class="p-mr-2"&gt;&lt;/button&gt;
&lt;button pButton pRipple type="button" icon="pi pi-minus" title="Remove Column" (click)="removeColumn()"[disabled]="columns.length === 1"&gt;&lt;/button&gt;

&lt;div class="p-grid p-mt-2"&gt;
    &lt;div class="p-col" *ngFor="let col of columns; let i=index" [@animation]="'visible'"&gt;
        &lt;div class="box"&gt;{{i + 1}}&lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;

&lt;h5&gt;Reverse Direction&lt;/h5&gt;
&lt;div class="p-grid p-flex-row-reverse"&gt;
    &lt;div class="p-col"&gt;
        &lt;div class="box"&gt;1&lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="p-col"&gt;
        &lt;div class="box"&gt;2&lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="p-col"&gt;
        &lt;div class="box"&gt;3&lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;

&lt;h5&gt;Column Direction&lt;/h5&gt;
&lt;div class="p-grid p-flex-column"&gt;
    &lt;div class="p-col"&gt;
        &lt;div class="box"&gt;1&lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="p-col"&gt;
        &lt;div class="box"&gt;2&lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="p-col"&gt;
        &lt;div class="box"&gt;3&lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;

&lt;h5&gt;Reverse Column Direction&lt;/h5&gt;
&lt;div class="p-grid p-flex-column-reverse"&gt;
    &lt;div class="p-col"&gt;
        &lt;div class="box"&gt;1&lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="p-col"&gt;
        &lt;div class="box"&gt;2&lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="p-col"&gt;
        &lt;div class="box"&gt;3&lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;

&lt;h5&gt;12 Column Grid&lt;/h5&gt;
&lt;div class="p-grid"&gt;
    &lt;div class="p-col-4"&gt;
        &lt;div class="box"&gt;4&lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="p-col"&gt;
        &lt;div class="box"&gt;1&lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="p-col"&gt;
        &lt;div class="box"&gt;1&lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="p-col"&gt;
        &lt;div class="box"&gt;1&lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="p-col"&gt;
        &lt;div class="box"&gt;1&lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="p-col"&gt;
        &lt;div class="box"&gt;1&lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="p-col"&gt;
        &lt;div class="box"&gt;1&lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="p-col"&gt;
        &lt;div class="box"&gt;1&lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="p-col"&gt;
        &lt;div class="box"&gt;1&lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;

&lt;div class="p-grid"&gt;
    &lt;div class="p-col-2"&gt;
        &lt;div class="box"&gt;2&lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="p-col-6"&gt;
        &lt;div class="box"&gt;6&lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="p-col-4"&gt;
        &lt;div class="box"&gt;4&lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;

&lt;div class="p-grid"&gt;
    &lt;div class="p-col-8"&gt;
        &lt;div class="box"&gt;8&lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="p-col-2"&gt;
        &lt;div class="box"&gt;2&lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="p-col-2"&gt;
        &lt;div class="box"&gt;2&lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;

&lt;h5&gt;MultiLine&lt;/h5&gt;
&lt;div class="p-grid"&gt;
    &lt;div class="p-col-6"&gt;
        &lt;div class="box"&gt;6&lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="p-col-6"&gt;
        &lt;div class="box"&gt;6&lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="p-col-6"&gt;
        &lt;div class="box"&gt;6&lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="p-col-6"&gt;
        &lt;div class="box"&gt;6&lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;

&lt;h5&gt;Fixed Width Column&lt;/h5&gt;
&lt;div class="p-grid"&gt;
    &lt;div class="p-col-fixed" style="width:100px"&gt;
        &lt;div class="box"&gt;100px&lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="p-col"&gt;
        &lt;div class="box"&gt;auto&lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;

&lt;h5&gt;Responsive&lt;/h5&gt;
&lt;div class="p-grid"&gt;
    &lt;div class="p-col-12 p-md-6 p-lg-3"&gt;
        &lt;div class="box"&gt;p-col-12 p-md-6 p-lg-3&lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="p-col-12 p-md-6 p-lg-3"&gt;
        &lt;div class="box"&gt;p-col-12 p-md-6 p-lg-3&lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="p-col-12 p-md-6 p-lg-3"&gt;
        &lt;div class="box"&gt;p-col-12 p-md-6 p-lg-3&lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="p-col-12 p-md-6 p-lg-3"&gt;
        &lt;div class="box"&gt;p-col-12 p-md-6 p-lg-3&lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;

&lt;h5&gt;Horizontal Alignment - Start&lt;/h5&gt;
&lt;div class="p-grid p-jc-start"&gt;
    &lt;div class="p-col-2"&gt;
        &lt;div class="box"&gt;2&lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="p-col-1"&gt;
        &lt;div class="box"&gt;1&lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="p-col-4"&gt;
        &lt;div class="box"&gt;4&lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;

&lt;h5&gt;Horizontal Alignment - End&lt;/h5&gt;
&lt;div class="p-grid p-jc-end"&gt;
    &lt;div class="p-col-2"&gt;
        &lt;div class="box"&gt;2&lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="p-col-1"&gt;
        &lt;div class="box"&gt;1&lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="p-col-4"&gt;
        &lt;div class="box"&gt;4&lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;

&lt;h5&gt;Horizontal Alignment - Center&lt;/h5&gt;
&lt;div class="p-grid p-jc-center"&gt;
    &lt;div class="p-col-2"&gt;
        &lt;div class="box"&gt;2&lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="p-col-1"&gt;
        &lt;div class="box"&gt;1&lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="p-col-4"&gt;
        &lt;div class="box"&gt;4&lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;

&lt;h5&gt;Horizontal Alignment - Between&lt;/h5&gt;
&lt;div class="p-grid p-jc-between"&gt;
    &lt;div class="p-col-2"&gt;
        &lt;div class="box"&gt;2&lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="p-col-1"&gt;
        &lt;div class="box"&gt;1&lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="p-col-4"&gt;
        &lt;div class="box"&gt;4&lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;

&lt;h5&gt;Horizontal Alignment - Around&lt;/h5&gt;
&lt;div class="p-grid p-jc-around"&gt;
    &lt;div class="p-col-2"&gt;
        &lt;div class="box"&gt;2&lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="p-col-1"&gt;
        &lt;div class="box"&gt;1&lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="p-col-4"&gt;
        &lt;div class="box"&gt;4&lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;

&lt;h5&gt;Horizontal Alignment - Even&lt;/h5&gt;
&lt;div class="p-grid p-jc-evenly"&gt;
    &lt;div class="p-col-2"&gt;
        &lt;div class="box"&gt;2&lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="p-col-1"&gt;
        &lt;div class="box"&gt;1&lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="p-col-4"&gt;
        &lt;div class="box"&gt;4&lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;

&lt;h5&gt;Vertical Alignment - Start&lt;/h5&gt;
&lt;div class="p-grid p-ai-start vertical-container"&gt;
    &lt;div class="p-col"&gt;
        &lt;div class="box"&gt;4&lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="p-col"&gt;
        &lt;div class="box"&gt;4&lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="p-col"&gt;
        &lt;div class="box"&gt;4&lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;

&lt;h5&gt;Vertical Alignment - End&lt;/h5&gt;
&lt;div class="p-grid p-ai-end vertical-container"&gt;
    &lt;div class="p-col"&gt;
        &lt;div class="box"&gt;4&lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="p-col"&gt;
        &lt;div class="box"&gt;4&lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="p-col"&gt;
        &lt;div class="box"&gt;4&lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;

&lt;h5&gt;Vertical Alignment - Center&lt;/h5&gt;
&lt;div class="p-grid p-ai-center vertical-container"&gt;
    &lt;div class="p-col"&gt;
        &lt;div class="box"&gt;4&lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="p-col"&gt;
        &lt;div class="box"&gt;4&lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="p-col"&gt;
        &lt;div class="box"&gt;4&lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;

&lt;h5&gt;Vertical Alignment - Stretch&lt;/h5&gt;
&lt;div class="p-grid p-ai-stretch vertical-container"&gt;
    &lt;div class="p-col"&gt;
        &lt;div class="box box-stretched"&gt;4&lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="p-col"&gt;
        &lt;div class="box box-stretched"&gt;4&lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="p-col"&gt;
        &lt;div class="box box-stretched"&gt;4&lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;

&lt;h5&gt;Vertical Alignment - Per Column&lt;/h5&gt;
&lt;div class="p-grid vertical-container"&gt;
    &lt;div class="p-col p-as-start"&gt;
        &lt;div class="box"&gt;4&lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="p-col p-as-center"&gt;
        &lt;div class="box"&gt;4&lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="p-col p-as-end"&gt;
        &lt;div class="box"&gt;4&lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;

&lt;h5&gt;Offset&lt;/h5&gt;
&lt;div class="p-grid"&gt;
    &lt;div class="p-col-6 p-offset-3"&gt;
        &lt;div class="box"&gt;6&lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;

&lt;div class="p-grid"&gt;
    &lt;div class="p-col-4"&gt;
        &lt;div class="box"&gt;4&lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="p-col-4 p-offset-4"&gt;
        &lt;div class="box"&gt;4&lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;

&lt;h5&gt;Nested&lt;/h5&gt;
&lt;div class="p-grid nested-grid"&gt;
    &lt;div class="p-col-8"&gt;
        &lt;div class="p-grid"&gt;
            &lt;div class="p-col-6"&gt;
                &lt;div class="box"&gt;6&lt;/div&gt;
            &lt;/div&gt;
            &lt;div class="p-col-6"&gt;
                &lt;div class="box"&gt;6&lt;/div&gt;
            &lt;/div&gt;
            &lt;div class="p-col-12"&gt;
                &lt;div class="box"&gt;12&lt;/div&gt;
            &lt;/div&gt;
        &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="p-col-4"&gt;
        &lt;div class="box box-stretched"&gt;4&lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;

&lt;h5&gt;Panels&lt;/h5&gt;
&lt;div class="p-grid"&gt;
    &lt;div class="p-col"&gt;
        &lt;p-panel header="Header"&gt;
            &lt;p class="p-m-0"&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
                Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
                Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
                cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.&lt;/p&gt;
        &lt;/p-panel&gt;
    &lt;/div&gt;
    &lt;div class="p-col"&gt;
        &lt;p-panel header="Header"&gt;
            &lt;p class="p-m-0"&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
                Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
                Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
                cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.&lt;/p&gt;
        &lt;/p-panel&gt;
    &lt;/div&gt;
    &lt;div class="p-col"&gt;
        &lt;p-panel header="Header"&gt;
            &lt;p class="p-m-0"&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
                Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
                Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
                cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.&lt;/p&gt;
        &lt;/p-panel&gt;
    &lt;/div&gt;
&lt;/div&gt;
</app-code>

<app-code lang="typescript" ngNonBindable ngPreserveWhitespaces>
import &#123;Component&#125; from '@angular/core';
import &#123;trigger,state,style,transition,animate&#125; from '@angular/animations';

@Component (&#123;
    styles:[`
        .box &#123;
            background-color: var(--surface-e);
            text-align: center;
            padding-top: 1rem;
            padding-bottom: 1rem;
            border-radius: 4px;
            box-shadow: 0 2px 1px -1px rgba(0,0,0,.2), 0 1px 1px 0 rgba(0,0,0,.14), 0 1px 3px 0 rgba(0,0,0,.12);
        &#125;

        .box-stretched &#123;
            height: 100%;
        &#125;

        .vertical-container &#123;
            margin: 0;
            height: 200px;
            background: var(--surface-d);
            border-radius: 4px;
        &#125;

        .nested-grid .p-col-4 &#123;
            padding-bottom: 1rem;
        &#125;
    `],
    templateUrl: './griddemo.html',
    animations: [
        trigger('animation', [
            state('visible', style(&#123;
                transform: 'translateX(0)',
                opacity: 1
            &#125;)),
            transition('void => *', [
                style(&#123;transform: 'translateX(50%)', opacity: 0&#125;),
                animate('300ms ease-out')
            ]),
            transition('* => void', [
                animate(('250ms ease-in'), style(&#123;
                    height: 0,
                    opacity: 0,
                    transform: 'translateX(50%)'
                &#125;))
            ])
        ])
    ]
&#125;)
export class GridDemo &#123;

    columns: number[];

    ngOnInit() &#123;
        this.columns = [0, 1, 2, 3, 4, 5];
    &#125;

    addColumn() &#123;
        this.columns.push(this.columns.length);
    &#125;

    removeColumn() &#123;
        this.columns.splice(-1, 1);
    &#125;
&#125;
</app-code>
        </p-tabPanel>
    </p-tabView>
</div>



